<template>
  <div class="search">
    <div class="search-input">
      <div class="inner">
        <input placeholder="请输入书名或作者"  @keydown.enter="getkeyword"/>
        <button @click="getkeyword"></button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    methods: {
      getkeyword() {
      let kework = document.querySelector("input").value;
      if (kework !== "") {
        // console.log(kework);
        this.$router.push(`/searchlist?keword=${kework}`);
        this.$router.go(0);
      } else {
        window.alert("请输入内容后搜索");
      }
    },
    }
}
</script>
<style lang="scss">
@import url(../../static/css/reset.css);
.search {
  width: 100%;
  margin: 10px 0 10px;
  .search-input {
    padding: 16px;
    height: 60px;
    .inner {
      position: relative;
      height: 35px;
      border-radius: 14px;
      background-color: #f7f7f7;
      padding-left: 14px;
      input {
        border: none;
        height: 100%;
        line-height: 35px;
        width: 80%;
        background-color: #f7f7f7;
        font-size: 14px;
        vertical-align: middle;
        float: left;
        padding: 2px 10px 2px;
        box-sizing: border-box;
      }
      button {
        width: 51px;
        height: 35px;
        background: url(../../static/imgs/icon_search_s.png)
          center center no-repeat;
        background-size: 15px 15px;
      }
    }
  }
}
</style>